<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          *{
            padding:0;
            margin: 0;
        }
        .canvas{
            display: block;
            margin: 0 auto;
        }
        .big{
            position: absolute;
            top:0px;
            left: 0px;
            transform: scale(0.4);
            
        }
        @keyframes tiao {
            0%{
                top: 0px;
            }
            100%{
                top:-40px;
            }
        }
    </style>
</head>
<body>
   <div class="big">
         <canvas width="900px" height="600px" class='canvas'></canvas>
   </div>
    <p>空格键</p>
    <script>
         var canvas=document.querySelector('.canvas');
         var paint=canvas.getContext('2d');
         paint.beginPath();
         paint.arc(400, 200,100, 0, 360/180 * Math.PI, false); 
         paint.strokeStyle='block';
         paint.lineWidth = 3;
         paint.stroke();
         paint.beginPath();
         paint.moveTo(301,180);
         paint.quadraticCurveTo(234,90,347,113);
         paint.stroke();
         paint.fill();
         paint.beginPath();
         paint.moveTo(500,180);
         paint.quadraticCurveTo(564,90,455,114);
         paint.stroke();
         paint.fill();
         paint.beginPath();
         paint.moveTo(360,160);
         paint.quadraticCurveTo(320,190,360,230);
         paint.lineWidth = 2;
         paint.stroke();
         paint.fill();
         paint.beginPath();
         paint.moveTo(360,160);
         paint.quadraticCurveTo(400,190,360,230);
         paint.lineWidth = 2;
         paint.stroke();
         paint.fill();
         paint.beginPath();
         paint.moveTo(440,160);
         paint.quadraticCurveTo(480,190,440,230);
         paint.fill();
         paint.beginPath();
         paint.moveTo(440,160);
         paint.quadraticCurveTo(400,190,440,230);
         paint.fill();
         paint.beginPath();
         paint.moveTo(360,250);
         paint.quadraticCurveTo(390,290,440,250)
         paint.stroke();
         paint.fill();      




         var big = document.querySelector('.big');
        document.onkeyup = function(e) {
            var e = e || window.event;
            // console.log(e.keyCode);
            if (e.keyCode == 32) {
                big.style.animation = 'tiao .4s';
                setTimeout(function() {
                    // 置空  没什么作用
                    big.style.animation = 'xxx .4s';
                }, 500)
            }
        }  
    </script>
</body>
</html>